<template>
	<view class="system">
		<view class="form">
			<form>
				<view class="item">
					<view class="label">直播间名称</view>
					<input type="text" v-model="form.name" placeholder="请输入房间名称" />
				</view>
				<view class="item">
					<view class="label">直播描述</view>
					<input type="text" v-model="form.liveDesc" placeholder="请输入直播描述" />
				</view>
				<view class="item flexStart">
					<view class="label">直播间背景图<view>1080*1920</view>
					</view>
					<view class='uploader'>
						<view class='img-item' v-if="form.coverImg">
							<image class="image" :src="form.coverImg" mode="aspectFill"></image>
							<icon class='icon' type="clear" size="20" color="#EF4444" @tap="onDelTab('coverImg')" />
						</view>
						<view class="img-add" v-else @tap="goIntercept(1080, 1920, 'coverImg')">
							<u-icon name="plus" color="#606266" size="36rpx"></u-icon>
							<view class="u-add-tips">点击上传</view>
						</view>
					</view>
				</view>
				<view class="item" @tap="tiemPickerShow">
					<view class="label">直播计划时间</view>
					<input type="text" v-model="form.time" disabled placeholder="请选择直播计划时间" />
					<u-icon name="arrow-right" color="#606266" size="36rpx"></u-icon>
				</view>
				<view class="item">
					<view class="label">主播昵称</view>
					<input type="text" v-model="form.anchorName" placeholder="请输入主播昵称" />
				</view>
				<view class="item">
					<view class="label">主播微信号</view>
					<input type="text" v-model="form.anchorWechat" placeholder="请输入主播微信号" />
				</view>
				<view class="item flexStart">
					<view class="label">分享图<view>800*640</view>
					</view>
					<view class='uploader'>
						<view class='img-item' v-if="form.shareImg">
							<image class="image" :src="form.shareImg" mode="aspectFill"></image>
							<icon class='icon' type="clear" size="20" color="#EF4444" @tap="onDelTab('shareImg')" />
						</view>
						<view class="img-add" v-else @tap="goIntercept(800, 640, 'shareImg')">
							<u-icon name="plus" color="#606266" size="36rpx"></u-icon>
							<view class="u-add-tips">点击上传</view>
						</view>
					</view>
				</view>
				<view class="item flexStart">
					<view class="label">封面图<view>800*800</view>
					</view>

					<view class='uploader'>
						<view class='img-item' v-if="form.feedsImg">
							<image class="image" :src="form.feedsImg" mode="aspectFill"></image>
							<icon class='icon' type="clear" size="20" color="#EF4444" @tap="onDelTab('feedsImg')" />
						</view>
						<view class="img-add" v-else @tap="goIntercept(800, 800, 'feedsImg')">
							<u-icon name="plus" color="#606266" size="36rpx"></u-icon>
							<view class="u-add-tips">点击上传</view>
						</view>
					</view>
				</view>
				<!-- <picker @change="screenPickerChange" :value="screenId" :range="array">
					<view class="item">
						<view class="label">屏幕类型</view>
						<input type="text" v-model="array[screenId]" disabled placeholder="请选择屏幕类型" />
						<u-icon name="arrow-right" color="#606266" size="36rpx"></u-icon>
					</view>
				</picker> -->
				<picker @change="typePickerChange" :value="typeId" :range="type_array">
					<view class="item">
						<view class="label">直播间类型</view>
						<input type="text" v-model="type_array[typeId]" disabled placeholder="请选择直播间类型" />
						<u-icon name="arrow-right" color="#606266" size="36rpx"></u-icon>
					</view>
				</picker>
				<!-- <view class="item" @tap="goodspopupEvent">
					<view class="label">直播商品</view>
					<view class="content">已选择<text>{{ goodsListNumber }}</text>件商品</view>
					<u-icon name="arrow-right" color="#606266" size="36rpx"></u-icon>
				</view> -->
				<view class="item">
					<view class="label">直播间点赞功能</view>
					<switch :checked="form.openLike" @change="switchChange($event, 'openLike')" color="#fe0000" style="transform:scale(0.7)" />
				</view>
				<view class="item">
					<view class="label">直播间商品货架</view>
					<switch :checked="form.openGoods" @change="switchChange($event, 'openGoods')" color="#fe0000" style="transform:scale(0.7)" />
				</view>
				<view class="item">
					<view class="label">直播间评论发言</view>
					<switch :checked="form.openComment" @change="switchChange($event, 'openComment')" color="#fe0000" style="transform:scale(0.7)" />
				</view>

			</form>
		</view>

		<view class="btnBox">
			<button class="submitBtn" @tap="subForm" :disabled="!protocol">提交</button>
		</view> 
		
		<datepicker :show="timePickerShow" type="rangetime" @confirm="timePickerConfirm" @cancel="timePickerHide"></datepicker>

		<view class="popup" v-if="goodspopupShow">
			<view class="mask" @tap="goodspopupHide" catch:touchmove="prevent"></view>
			<view class="content">
				<view class="title">选择直播商品</view>
				<scroll-view scroll-y class="goodsList" v-if="goods_list.length > 0">
					<checkbox-group @change="checkboxChange">
						<view class="item" v-for="(item, index) in goods_list" :key="index">
							<checkbox :checked="item.checked" :value="item.goods_id" />
							<view class="contentBox">
								<image class="goodsImg" mode="aspectFill" :src="item.goods_main_img"></image>
								<view class="con">
									<view class="titleBox u-line-2">{{item.goods_title}}</view>
									<view class="info">
										<view class="price" v-if="item.low_price != item.high_price">价格:￥<text>{{item.low_price}}-{{item.high_price}}</text></view>
										<view class="price" v-else>价格:￥<text>{{item.low_price}}</text></view>
										<view class="stock">库存:<text>{{item.total_store_num}}</text></view>
									</view>
								</view>
							</view>
						</view>
					</checkbox-group>
				</scroll-view>
				<view class="buttomBox" v-if="goods_list.length > 0">
					<button class="btn" @tap="goodspopupHide">取消</button>
					<button class="btn" @tap="goodspopupHide">确认</button>
				</view>
				<view class="nocontent" v-if="goods_list.length == 0">
					暂无直播带货商品
				</view>
			</view>
		</view>

		<view class="popup" v-if="rzPopupShow">
			<view class="mask" @touchmove="prevent"></view>
			<view class="content contentPadding">
				<view class="closeBox" @tap="rzPopupHide">
					<u-icon name="close"></u-icon>
				</view>
				<image class="QRcode" :src="auth_qrcode" mode="widthFix" @tap="previewImage"></image>
				<view class="text red">创建失败，直播微信号未认证，请先认证！</view>
				<view class="text">点击预览后长按二维码认证主播</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/common/util.js');
	var common_utils = require('@/common/common_utils.js');
	import datepicker from '../../components/datepicker.vue'

	export default {
		components: {
			datepicker
		},
		data() {
			return {
				protocol:true,
				form: {
					name: '',
					liveDesc: '',
					coverImg: '',
					time: '',
					anchorName: '',
					anchorWechat: '',
					shareImg: '',
					feedsImg: '',
					// 直播间类型 【1: 推流，0：手机直播】
					type: 0,
					// 横屏、竖屏 【1：横屏，0：竖屏】（横屏：视频宽高比为16:9、4:3、1.85:1 ；竖屏：视频宽高比为9:16、2:3）
					screen: 0,
					// 是否开启点赞 【0：关闭，1：开启】（若关闭，直播开始后不允许开启）
					openLike: 1,
					// 是否开启货架 【0：关闭，1：开启】（若关闭，直播开始后不允许开启）
					openGoods: 1,
					// 是否开启评论 【0：关闭，1：开启】（若关闭，直播开始后不允许开启）
					openComment: 1,
					// 是否开启回放 【0：关闭，1：开启】
					openReplay: 1,
					// 是否开启分享 【0：关闭，1：开启】默认开启分享（直播开始后不允许修改）
					openShare: 1,
					// 是否开启客服 【0：关闭，1：开启】 默认关闭客服
					openKf: 1
				},
				screenId: 0,
				array: ['竖屏', '横屏'],
				typeId: 0,
				type_array: ['手机直播', '推流【需要直播设备】'],
				timePickerShow: false,
				pickerConfig: {
					endDate: true,
					column: 'minute',
					dateLimit: false,
					initStartTime: '2020-10-30 17:01:00',
					initEndTime: '',
					limitStartTime: '',
					limitEndTime: ''
				},
				goodspopupShow: false,
				goods_list: [{
					goods_id: '1',
					goods_main_img: 'http://xcx.tfxiaochengxu.com/2021-01-22_600a94502697d.jpg',
					goods_title: '大牌大牌【中国黄金】3D足金吊坠礼盒装0.2g',
					low_price: '368.00',
					high_price: '998.00',
					total_store_num: 24,
					checked: false
				}, {
					goods_id: '2',
					goods_main_img: 'http://xcx.tfxiaochengxu.com/2021-01-22_600a94502697d.jpg',
					goods_title: '大牌大牌【中国黄金】3D足金吊坠礼盒装0.2g',
					low_price: '368.00',
					high_price: '98.00',
					total_store_num: 24,
					checked: false
				}],
				goodsListNumber: 0,
				rzPopupShow: false,
				auth_qrcode: ''
			}
		},
		created() {
			let _this = this;
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', item => {
				//this.form[item.name] = item.path;
				// 可以在此上传到服务端
				util.uploadSigleFilePost("api.php/Upload/uploadImg",item.path,'image','file',{},function(res){
					if(res.code == 1){
						_this.form[item.name] = res.data.path;
					}else{
						util.toast('图片上传失败，请重试');
					}
				});
			})
		},
		methods: {
			switchChange(e, name) {
				this.form[name] = Number(e.detail.value)
			},
			goodspopupEvent() {
				this.goodspopupShow = true
			},
			goodspopupHide() {
				this.goodspopupShow = false
			},
			tiemPickerShow() {
				this.timePickerShow = true
			},
			timePickerConfirm(e) {
				this.form.time = `${e.value[0]} - ${e.value[1]}`
				this.timePickerShow = false
			},
			timePickerHide() {
				this.timePickerShow = false
			},
			checkboxChange(e) {
				const choose_ids = e.detail.value;
				let goods_list = this.goods_list;

				goods_list.forEach(event => {
					if (common_utils.is_in_array(event.goods_id, choose_ids)) {
						event.checked = true;
					} else {
						event.checked = false;
					}
				});

				this.goods_list = goods_list
				this.goodsListNumber = choose_ids.length
			},
			goIntercept(width, height, name) {
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: width,
						destHeight: height,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: width / 2,
						rectHeight: height / 2,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'png',
						name: name
					}
				})
			},
			onDelTab(name) {
				this.form[name] = ''
			},
			subForm() {
				let that = this;
				let param = that.form;
				util.requestPost("api.php/Live/addLivePlayer", param, function(res) {
					that.protocol = false;
					if(res.data.code == 1){
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel:false,
							success: function (res) {
								uni.navigateBack();
							}
						});						
					}else if(res.data.code == 2){
						that.auth_qrcode = res.data.url;
						that.rzPopupShow = true;
						that.protocol = true;
					}else{
						that.protocol = true;
					}
				},true);
			},
			rzPopupHide() {
				this.rzPopupShow = false
			},
			typePickerChange:function(e){
				this.typeId = e.detail.value;
				this.form.type = e.detail.value;
			},
			screenPickerChange:function(e){
				this.screenId = e.detail.value;
				this.form.screen = e.detail.value;
			},
			previewImage() {
				uni.previewImage({
					current: this.auth_qrcode,
					urls: [this.auth_qrcode],
				})
			},
			prevent() {
				return;
			},
		}
	}
</script>

<style scoped lang="scss">
.system {
	min-height: 100%;
	background-color: var(--bgColor);
}
.form {
	background-color: #ffffff;
	padding: 0 32rpx;
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eeeeee;
		&.flexStart {
			justify-content: flex-start;
		}
		.label {
			width: 180rpx;
			font-size: 24rpx;
		}
		input,
		textarea {
			flex: 1;
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #333333;
		}
		textarea {
			height: 160rpx;
		}
		.content {
			flex: 1;
			margin-left: 20rpx;
			font-size: 24rpx;

			text {
				color: var(--primaryColor);
			}
		}
	}
}
.btnBox {
	padding: 0 32rpx;
	margin: 60rpx 0;
	.submitBtn {
		width: 100%;
		background: var(--btnBgColor);
		color: #fff;
		border-radius: 80rpx;
	}
}
.popup {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	.mask {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.content {
		width: 660rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		.title {
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
			line-height: 80rpx;
			border-bottom: 1rpx solid #eeeeee;
		}
	}
}
.goodsList {
	padding: 0 20rpx;
	max-height: 600rpx;
	box-sizing: border-box;
	.item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eeeeee;
		&:last-of-type {
			border-bottom: none;
		}
		.contentBox {
			flex: 1;
			display: flex;
			align-items: center;
			.goodsImg {
				width: 140rpx;
				height: 140rpx;
				border-radius: 12rpx;
			}
			.con {
				flex: 1;
				margin-left: 20rpx;
				.titleBox {
					font-size: 30rpx;
					margin-bottom: 12rpx;
					color: #333333;
				}
				.info {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					.price {
						font-size: 24rpx;
						margin-right: 20rpx;
						color: var(--primaryColor);
						text {
							font-size: 24rpx;
						}
					}
					.stock {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
	}
}
checkbox {
	margin-right: 8rpx;
	transform:scale(0.8);
}
uni-checkbox .uni-checkbox-input { 
	width: 30rpx !important; 
	height: 30rpx !important; 
}

.popup {
	.content {
		.buttomBox {
			display: flex;
			border-top: 2rpx solid #eeeeee;
			padding: 24rpx 0;
			.btn {
				background-color: #fff;
				padding: 0 48px;
				&:first-of-type {
					border-right: 1rpx solid #eeeeee;
				}
				&:last-of-type {
					color: #576B95;
				}
			}
		}
		&.contentPadding {
			width: 480rpx;
			padding: 48rpx;
			.QRcode {
				width: 100%;
			}
			.text {
				text-align: center;
				font-size: 26rpx;
				color: #999999;
				margin-top: 32rpx;
			}
			.red {
				color: red;
			}
		}
		.closeBox {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.closeBox {
		.icofont {
			color: #333333;
		}
	}
}
.nocontent {
	text-align: center;
	padding: 60rpx;
}
.uploader {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background: #f4f5f6;
	margin: 10rpx;
	border-radius: 12rpx;
}
.uploader .img-item,
.img-add {
	position: relative;
	width: 140rpx;
	height: 140rpx;
}
.uploader .img-add {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.uploader .u-add-tips {
	color: #606266;
	font-size: 26rpx;
	margin-top: 12rpx;
}
.uploader .img-item .image {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
.uploader .icon {
	position: absolute;
	top: 0;
	right: 0;
}
</style>
